<template>
  <div style="flex:1; " class="flex">
     <p class="bg-info text-center" style="padding: 8px;">表事件</p>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
       <div novalidate class="form-inline" partial>
         <div class="row">
            <label for="startdate"  class=" col-sm-1">表号:</label>
           <div class="col-sm-2" style="margin-right:30px;">
             <input  type="text" class="form-control" v-model="model.f_meternumber"
             condition="f_meternumber = '{}'" v-next-el='abc' v-filter v-focus disabled="true">
           </div>

         <label for="startdate"  class=" col-sm-1 ">开始日期:</label>
         <div class="col-sm-2" style="margin-right:30px;">
           <datepicker id="startdate"
           placeholder="开始日期"
           v-model="model.startdate"
           :value.sync="model.startdate"
           condition="f_eventdate >='{}'"
           :format="'yyyy-MM-dd'"
            :disabled-days-of-Week="[]"
           width="100%">
         </div>
         <label for="enddate"  class=" col-sm-1 ">结束日期:</label>
         <div class="col-sm-2" style="margin-right:30px;">
           <datepicker id="enddate"
           placeholder="结束日期"
           v-model="model.enddate"
           :value.sync="model.enddate"
           condition="f_eventdate <='{}'"
           :format="'yyyy-MM-dd'"
            :disabled-days-of-Week="[]"
           width="100%">
         </div>
           <button class="btn btn-success active" @click="$parent.$parent.search()" v-el:cba>查询</button>
         </div>
       </div>
      </criteria>
      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
              <th>用户编号</th>
             <th>表号</th>
             <th>事件代码</th>
             <th>事件描述</th>
             <th>事件日期</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_userinfo_id}}</td>
            <td style="text-align:center">{{row.f_meternumber}}</td>
            <td style="text-align:center">{{row.f_eventcode}}</td>
            <td style="text-align:center">{{row.f_eventmsg}}</td>
            <td style="text-align:center">{{row.f_eventdate}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <div style="text-align:right;height:auto;margin-right:50px;">
     <button class="btn btn-success " @click="confirm()" style="width:80px;margin-left:20px;" >确&nbsp;&nbsp;&nbsp;定</button>
   </div>
  </div>
</template>
<script>
/**
*查询表事件组件
*/
import { PagedList } from 'vue-client'
export default {
  title: '表事件',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 20,
       {items: '"' + this.items + '"', tablename: '"' + this.tablename + '"',
         orderitem: '"' + this.orderitem + '"'})
    }
  },
  props: {
    items: {
      type: String,
      default: '*'
    },
    tablename: {
      type: String,
      default: 't_wmevents'
    },
    orderitem: {
      type: String,
      default: 'f_eventdate desc'
    },
    row: {}
  },
  watch: {
    'row' (val) {
      this.model.model.f_meternumber = val.f_meternumber
      this.search()
    }
  },
  ready () {
    this.model.f_meternumber = this.row.f_meternumber
    this.search()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      args.condition = `${args.condition} and f_meternumber = '${this.row.f_meternumber}'`
      this.model.search(args.condition, args.model)
    },
    confirm () {
      this.$dispatch('clean', '表事件')
    }
  }
}
</script>
